<template>
	<view class="discover">

		<z-paging ref="paging" v-model="dataList" @query="queryList" style="background: rgba(127,127,127,.1);">
			<view slot='top'>
				<u-navbar title="发现" :is-back="false">
					<view slot='right' style="text-align: center;margin-right: 30rpx;" @click="toRelease">
						<u-icon name="plus" size='32'></u-icon>
						<view style="font-size: 24rpx;">发布</view>
					</view>
				</u-navbar>
				<view class="top">
					<view class="hot">
						<view class="title-more">
							<view class="title">热门话题</view>
							<view class="more" @click="toMore">更多 <u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="topic">
							<view class="topic-item" v-for="item in topicList" @click="toTopic(item)">
								<view class="wrap">
									<image src="https://www.auok.ltd/background.jpg"></image>
									<view class="topic-text">
										#{{item.topic.length > 7 ? item.topic.slice(0,7):item.topic}}#
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tabs-wrap">
					<u-tabs :list="tabsList" :current="tabsIndex" :is-scroll="false" active-color="#ff4273"
						@change="tabsChange"></u-tabs>
				</view>
			</view>


			<show-moment :dataList="dataList"></show-moment>
		</z-paging>
	</view>
</template>

<script>
	import showMoment from '@/components/showMoment.vue'
	export default {
		components: {
			showMoment
		},
		data() {
			return {
				dataList: [],
				topicList: [{
					topic: '碎碎念'
				}, {
					topic: '碎碎念碎碎念碎碎念'
				}, {
					topic: '碎碎念碎碎念碎碎念碎碎念'
				}, {
					topic: '碎碎念碎碎念碎碎念碎碎念碎碎念碎碎念'
				}],
				tabsList: [{
					name: '最新动态'
				}, {
					name: '好友动态'
				}],
				tabsIndex: 0,
				request: {
					queryList: function() {
						return Promise.resolve([{
							imgList: ['https://www.auok.ltd/background.jpg',
								'https://www.auok.ltd/background.jpg'
							]
						}, {
							imgList: ['https://www.auok.ltd/avatar.jpg', 'https://www.auok.ltd/avatar.jpg',
								'https://www.auok.ltd/avatar.jpg'
							]
						}, {}])
					}
				}
			};
		},
		methods: {
			toMore(){
				uni.navigateTo({
					url:'/pages/topic/topicMore/topicMore'
				})
			},
			toRelease() {
				uni.navigateTo({
					url: '/pages/release/release'
				})
			},
			toTopic(item) {
				uni.navigateTo({
					url: '/pages/topic/topic?topicId=123'
				})
			},
			tabsChange(index) {
				this.tabsIndex = index
				this.$refs.paging.reload(true)
			},
			queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize, this.request, this.dataList)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging

				this.request.queryList({
					pageNo,
					pageSize
				}).then(res => {
					console.log(res)
					let arr = []
					for (let a = 0; a < 2; a++) {
						arr = arr.concat(res)
					}
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(arr);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-wrap {
		position: sticky;
		top: 0;
		background-color: #FFFFFF;
		z-index: 999;
		// padding: 10rpx 0;
	}

	.topic {
		// display: flex;
		// align-items: center;

		.topic-item {

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 45%;
			// border: 1px solid;
			display: inline-block;
			margin: 2%;
			color: #333;

			.wrap {
				display: flex;
				align-items: center;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				min-height: 50rpx;
				min-width: 50rpx;
				margin-right: 15rpx;

			}
		}
	}

	.top {


		// border: 1px solid;
		.hot {
			background-color: #FFFFFF;
			padding: 10rpx 30rpx;
			margin-bottom: 15rpx;

			.title-more {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 38rpx;
				}

				.more {
					color: rgba($color: gray, $alpha: .5);
					font-size: 28rpx;
				}
			}

		}
	}
</style>
